<!DOCTYPE html>
<html >
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>传智健康</title>
        <meta name="description" content="传智健康">
        <meta name="keywords" content="传智健康">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../plugins/elementui/index.css">
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../css/style.css">
    </head>
    <body class="hold-transition">
    <div id="app">
        <div class="content-header">
            <h1>预约管理<small>预约订单管理</small></h1>
            <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>预约管理</el-breadcrumb-item>
                <el-breadcrumb-item>预约订单管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="app-container">
            <div class="box">
                <div class="filter-container">
                    <el-date-picker v-model="orderDate"
                                    type="daterange"
                                    align="right"
                                    value-format="yyyy-MM-dd"
                                    unlink-panels
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                    size="small" style="width: 300px;">

                    </el-date-picker>

                    <el-select v-model="orderType" clearable  placeholder="请选择预约类型" style="width: 100px;" size="small">
                        <el-option label="微信预约" value="微信预约"></el-option>
                        <el-option label="电话预约" value="电话预约"></el-option>
                    </el-select>

                    <el-select v-model="orderStatus" clearable  placeholder="请选择预约状态" style="width: 150px;" size="small">
                        <el-option label="已到诊" value="已到诊"></el-option>
                        <el-option label="未到诊" value="未到诊"></el-option>
                    </el-select>


                    <el-input placeholder="会员姓名/手机号/套餐名称"  size="small" v-model="pagination.queryString" style="width: 200px;" class="filter-item"></el-input>
                    <el-button @click="pagination.currentPage=1;findPage()" class="dalfBut" style="margin-left: 10px">查询</el-button>
                    <el-button type="primary" class="butT" @click="handleCreate()" >预约</el-button>
                    <el-button type="primary" class="butT" @click="handleClear()" >清除</el-button>
                </div>


                <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
                    <el-table-column type="index" align="center" label="序号"></el-table-column>
                    <el-table-column prop="memberName" label="会员姓名" align="center"></el-table-column>
                    <el-table-column prop="phoneNumber" label="电话号码" align="center"></el-table-column>
                    <el-table-column prop="orderDate" label="预约日期" align="center"></el-table-column>
                    <el-table-column prop="orderType" label="预约类型" align="center"></el-table-column>
                    <el-table-column prop="orderStatus" label="预约状态" align="center">
                        <template slot-scope="scope">
                            <el-switch
                                    :disabled="new Date(scope.row.orderDate)>=new Date()?false:true"
                                    style="display: block"
                                    v-model="scope.row.orderStatus"
                                    active-color="#00A854"
                                    active-text="完成"
                                    active-value="已到诊"
                                    inactive-color="#F04134"
                                    inactive-text="等待"
                                    inactive-value="未到诊"
                                    @change="changeStatus(scope.row)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="setmealName" label="套餐名称" align="center"></el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="handleUpdate(scope.row)" :disabled="new Date(scope.row.orderDate)>=new Date()?false:true">编辑</el-button>
                            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-container">
                    <el-pagination
                            class="pagiantion"
                            @current-change="handleCurrentChange"
                            :current-page="pagination.currentPage"
                            :page-size="pagination.pageSize"
                            layout="total, prev, pager, next, jumper"
                            :total="pagination.total">
                    </el-pagination>
                </div>
                <!-- 新增标签弹层 -->
                <div class="add-form">
                    <el-dialog title="新增预约" :visible.sync="dialogFormVisible">
                        <template>
                            <el-tabs v-model="activeName" type="card">
                                <el-tab-pane label="基本信息" name="first">
                                    <el-form :model="formData" label-position="right" :rules="rules" label-width="100px"
                                             ref="dataAddForm">
                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item label="手机号" prop="phoneNumber">
                                                    <el-input v-model="formData.phoneNumber"/>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label="预约日期">
                                                    <el-date-picker
                                                            v-model="formData.orderDate"
                                                            type="date"
                                                            value-format="yyyy-MM-dd"
                                                            placeholder="选择日期">
                                                    </el-date-picker>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item label="姓名">
                                                    <el-input v-model="formData.memberName"/>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                    </el-form>
                                </el-tab-pane>
                                <el-tab-pane label="套餐信息" name="second">
                                    <div class="checkScrol">
                                        <table class="datatable">
                                            <thead>
                                            <tr>
                                                <th>选择</th>
                                                <th>套餐编码   </th>
                                                <th>套餐名称</th>
                                                <th>套餐说明</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr v-for="c in tableData">
                                                <td>
                                                    <!--<input :id="c.id" v-model="setmealId" type="checkbox" :value="c.id">-->
                                                    <template>
                                                        <el-radio v-model="setmealId" :label="c.id"></el-radio>
                                                    </template>
                                                </td>
                                                <td><label :for="c.id">{{c.code}}</label></td>
                                                <td><label :for="c.id">{{c.name}}</label></td>
                                                <td><label :for="c.id">{{c.remark}}</label></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </el-tab-pane>
                            </el-tabs>
                        </template>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取消</el-button>
                            <el-button type="primary" @click="handleAdd()">确定</el-button>
                        </div>
                    </el-dialog>
                </div>

                <!-- 编辑标签弹层 -->
                <div class="add-form">
                    <el-dialog title="编辑预约" :visible.sync="dialogFormVisible4Edit">
                        <template>
                            <el-tabs v-model="activeName" type="card">
                                <el-tab-pane label="基本信息" name="first">
                                    <el-form :model="formData" label-position="right" :rules="rules" label-width="100px"
                                             ref="dataAddForm">
                                        <el-row>
                                           <!-- <el-col :span="12">
                                                <el-form-item label="手机号" prop="phoneNumber">
                                                    <el-input v-model="formData.phoneNumber"/>
                                                </el-form-item>
                                            </el-col>-->
                                            <el-col :span="12">
                                                <el-form-item label="姓名">
                                                    <el-input v-model="formData.memberName"/>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label="预约日期">
                                                    <el-date-picker
                                                            v-model="formData.orderDate"
                                                            type="date"
                                                            value-format="yyyy-MM-dd"
                                                            placeholder="选择日期">
                                                    </el-date-picker>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>

                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item label="预约类型">
                                                    <el-select v-model="formData.orderType" placeholder="预约类型">
                                                        <el-option label="微信预约" value="微信预约"></el-option>
                                                        <el-option label="电话预约" value="电话预约"></el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label="预约状态">
                                                    <el-select v-model="formData.orderStatus" placeholder="预约状态">
                                                        <el-option label="已到诊" value="已到诊"></el-option>
                                                        <el-option label="未到诊" value="未到诊"></el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>

                                    </el-form>
                                </el-tab-pane>
                                <el-tab-pane label="套餐信息" name="second">
                                    <div class="checkScrol">
                                        <table class="datatable">
                                            <thead>
                                            <tr>
                                                <th>选择</th>
                                                <th>套餐编码</th>
                                                <th>套餐名称</th>
                                                <th>套餐说明</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr v-for="c in tableData">
                                                <td>
                                                    <!--<input :id="c.id" v-model="setmealId" type="checkbox" :value="c.id">-->
                                                    <template>
                                                        <el-radio v-model="setmealId" :label="c.id"></el-radio>
                                                    </template>
                                                </td>
                                                <td><label :for="c.id">{{c.code}}</label></td>
                                                <td><label :for="c.id">{{c.name}}</label></td>
                                                <td><label :for="c.id">{{c.remark}}</label></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </el-tab-pane>
                            </el-tabs>
                        </template>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
                            <el-button type="primary" @click="handleEdit()">确定</el-button>
                        </div>
                    </el-dialog>
                </div>
            </div>
        </div>
    </div>
    </body>
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script>            var vue = new Vue({                el: '#app',                data:{                    value: true,                    orderDate:"",                      orderType:'',                      orderStatus:'',                      activeName: 'first',                      pagination: {                          currentPage: 1,                          pageSize:6,                          total:0,                          queryString:null                      },                    dataList: [],                      formData: {},                      tableData: [],                      setmealId:'',                      dialogFormVisible: false,                      dialogFormVisible4Edit:false,                      rules: {                          phoneNumber: [{required: true, message: '手机号为必填项', trigger: 'blur'}]                    }                    },                                  created() {                                          this.findPage();                },                methods: {                                          changeStatus(row){                        axios.post("/order/changeStatus.do",{id:row.id,orderStatus:row.orderStatus}).then((res)=>{                            if (res.data.flag) {                                this.$message({                                    type: 'success',                                    message: res.data.message                                });                                this.findPage();                            } else {                                this.$message.error(res.data.message)                            }                        })                    },                                              handleEdit() {                        axios.post("/order/edit.do?setmealId=" + this.setmealId, this.formData).then((res) => {                            if (res.data.flag) {                                this.$message({                                    message: res.data.message,                                    type: 'success'                                });                                this.findPage();                            } else {                                this.$message.error(res.data.message)                            }                        }).finally(() => {                            this.dialogFormVisible4Edit = false;                        });                    },                                          handleAdd () {                        this.$refs['dataAddForm'].validate((valid) => {                            if (valid) {                                axios.post("/order/submit.do?setmealId=" + this.setmealId, this.formData).then((res) => {                                    this.dialogFormVisible = false;                                    if (res.data.flag) {                                                                                  this.$message({                                            type: 'success',                                            message: res.data.message                                        });                                    } else {                                                                                  this.$message.error(res.data.message);                                    }                                }).finally(() => {                                    this.findPage();                                });                            } else {                                this.$message.error("表单数据校验失败!");                                return false;                            }                        });                            },
            findPage() {
        var param = {
            currentPage: this.pagination.currentPage,                                                          pageSize: this.pagination.pageSize,                                                          queryString: this.pagination.queryString,
                startDate: this.orderDate?this.orderDate[0]:null,
                endDate: this.orderDate?this.orderDate[1]:null,
                orderType: this.orderType,
            orderStatus: this.orderStatus,
        };
        axios.post("/order/findOrdersPage.do", param).then((res) => {                            this.pagination.total = res.data.total;                            console.log(res.data.rows);                            this.dataList = res.data.rows;                        });                        },                                          handleClear(){                        this.orderDate='',                        this.orderStatus='',                        this.orderType='',                        this.pagination.queryString=null                    },                                              resetForm() {                        this.formData = {};                                              },                                          handleCreate() {                        this.activeName = 'first';                        this.setmealId = [];                          this.dialogFormVisible = true;                        this.resetForm();                        axios.post("/setmeal/findAll.do").then((res) => {                            if (res.data.flag) {                                this.tableData = res.data.data;                            } else {                                this.$message.error(res.data.message);                            }                        });                        },                                          handleUpdate(row) {                        this.activeName = 'first';                        this.dialogFormVisible4Edit=true;                        this.resetForm();                                                                            axios.get("/order/findById.do?id=" + row.id).then((res) => {                            if (res.data.flag) {                                  this.formData = res.data.data;                            } else {                                  res.$message.error(res.data.message);                            }                        });                                                   axios.get("/setmeal/findAll.do").then((res) => {                            if (res.data.flag) {                                  this.tableData = res.data.data;                                axios.get("/order/findSetmealIdByOrderId.do?id=" + row.id).then((res) => {                                    if (res.data.flag) {                                        this.setmealId = res.data.data;                                    } else {                                        this.$message.error(res.data.message);                                    }                                });                            } else {                                  res.$message.error(res.data.message);                            }                        });                    },                                          handleCurrentChange(currentPage) {                                                  this.pagination.currentPage=currentPage,                                                          this.findPage();                    },                                          handleDelete(row) {                        this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {type: 'warning'}).then(() => {                            axios.get("/order/delete.do?id=" + row.id).then((res) => {                                if (res.data.flag) {                                    this.$message({                                        message: res.data.message,                                        type: 'success'                                    });                                    this.findPage();                                } else {                                    this.$message.error(res.data.message)                                }                            });                        }).catch(() => {                            this.$message({                                type: 'info',                                message: '已取消删除'                            });                        });                    }                }            })        </script>
</html>